<template>
	<div class="panel">
		<!-- 头部标题 -->
		<div class="panel-header">
			<div class="dis-flex flex-sbc">
				<div>APP客户列表</div>
				<div class="dis-ib" v-if="false">
          <el-button-group>
            <el-button type="primary" :plain="userClass!==1" size="small"
              @click="setConditional($event,'userClass',1)">注册</el-button>
            <el-button type="primary" :plain="userClass!==2" size="small"
              @click="setConditional($event,'userClass',2)">初级</el-button>
            <el-button type="primary" :plain="userClass!==3" size="small"
              @click="setConditional($event,'userClass',3)">中级</el-button>
            <el-button type="primary" :plain="userClass!==4" size="small"
              @click="setConditional($event,'userClass',4)">高级</el-button>
          </el-button-group>
          <el-button-group>
            <el-button type="primary" :plain="isRead!==false" size="small"
              @click="setConditional($event,'isRead',false)">未读</el-button>
            <el-button type="primary" :plain="isRead!==true" size="small"
              @click="setConditional($event,'isRead',true)">已读</el-button>
          </el-button-group>
          
				</div>
			</div>
		</div>
		<!-- 客户列表 -->
		<div class="panel-body" v-loading="loading">
			<el-empty v-if="dataList.length == 0" description="暂无数据"></el-empty>
			<ul class="list" v-if="dataList.length > 0">
        <li v-for="(v,i) in dataList" :key="i" :class="{item:true,active:v.userId==selectObj.userId}" @click="clickSingleItem(i,v)">
          <el-image class="face" :src="v.imgUrl" fit="cover"></el-image>
          <div class="cusInfo text-overflow">
            <span v-if="v.name" class="text-blue">{{ v.name }}</span>
            <span v-else class="text-gray">{{ v.nicheng }}</span>
            -
            <span v-if="v.salesmanName" class="text-blue">{{ v.salesmanName }}</span>
            <span v-else class="text-gray">&nbsp;</span>
            <el-badge class="badge" is-dot v-if="!v.isRead"></el-badge>
          </div>
          <div class="msg text-overflow" v-html="JSON2HTML(v)"></div>
          <retime class="time" :time="v.addTime"/>
        </li>
			</ul>
		</div>
		<!-- 底部分页 -->
		<div class="panel-footer dis-flex flex-rm">
			<!-- 总页数 -->
			<div class="total">第 {{number}}-{{numberEnd}} 条/总共 {{total}} 条</div>
			<!-- 分页选择 -->
			<el-pagination background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
				:current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
        :layout="isMobile?'prev,next':'prev,pager,next'">
			</el-pagination>
		</div>
	</div>
</template>

<script src="./customerList.js"></script>

<style lang="less" scoped src="./customerList.less"></style>
